<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择区域'
  }
})

const emits = defineEmits(['update:modelValue'])

const change = (e) => {
  emits('update:modelValue', e.join('-'))
}
const value = ref(null)
const options = ref(window.config.areas)

watch(
  () => props.modelValue,
  (val) => {
    value.value = val ? val.split('-') : null
  },
  { immediate: true }
)
</script>

<template>
  <a-cascader
    @change="change"
    :value="value"
    :options="options"
    :placeholder="props.placeholder"
    showSearch
    :field-names="{ label: 'value', value: 'value', children: 'children' }"
    allowClear
  />
</template>